<template>
  <div class="am-u-sm-12 am-form">
    <el-select
      v-if="areaTeam"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      @change="handleAreaTeamIdChange"
      v-model="query.areaTeamId"
      placeholder="请选择区域"
    >
      <el-option
        v-for="item in areaTeams"
        :key="item.areaTeamId"
        :label="item.name"
        :value="item.areaTeamId"
      >
      </el-option>
    </el-select>

    <el-select
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.periodId"
      v-if="needPeriods"
      placeholder="期数"
    >
      <el-option
        v-for="(itemPer,index) in periods"
        :key="index"
        :value="itemPer.value"
        :label="itemPer.text"
      >
        {{itemPer.text}}
      </el-option>
    </el-select>

    <el-select
      v-if="busTeam"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.busTeamId"
      placeholder="业务组"
    >
      <el-option
        v-if="busTeams.length > 0"
        label="请选择业务组"
        value=""
      >
      </el-option>
      <el-option
        v-for="item in busTeams"
        :key="item.value"
        :label="item.text"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-select
      v-if="campusTeam"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.campusId"
      no-data-text="无数据，请切换区域"
      placeholder="请选择校区"
    >
      <el-option
        v-if="campusTeams.length > 0"
        label="请选择校区"
        value=""
      >
      </el-option>
      <el-option
        v-for="item in campusTeams"
        :key="item.campusId"
        :label="item.campusName"
        :value="item.campusId"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="priority"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.priority"
      placeholder="请选择紧急程度"
    >
      <el-option
        v-for="item in priorities"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="visitStatus"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.visitStatus"
      placeholder="是否跟进"
    >
      <el-option
        v-for="item in visitStatuses"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="alloStatus"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.alloStatus"
      placeholder="请选择分配状态"
    >
      <el-option
        v-for="item in alloStatuses"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="followStatus"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.followStatus"
      placeholder="是否抢占"
    >
      <el-option
        v-for="item in followStatuses"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="haveReg"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.haveReg"
      placeholder="是否成交"
    >
      <el-option
        v-for="item in haveRegStatus"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="resourceType"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.customerResourceType"
      placeholder="资源类别"
    >
      <el-option
        v-for="item in resourceTypes"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="department && areaTeam"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.departmentId"
      placeholder="导入部门"
    >
      <el-option
        v-if="departmentList.length > 0"
        label="请选择导入部门"
        value=""
      >
      </el-option>
      <el-option
        v-for="item in departmentList"
        :key="item.departmentId"
        :label="item.departmentName"
        :value="item.departmentId"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="gradeName"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.gradeId"
      placeholder="请选择年级"
    >
      <el-option
        v-if="grades.length > 0"
        label="请选择年级"
        value=""
      >
      </el-option>
      <el-option
        v-for="item in grades"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select
      v-if="subject"
      size="small"
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-model="query.subjectId"
      placeholder="请选择科目"
    >
      <el-option
        v-for="item in subjects"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="createTime"
    >
      <el-date-picker
        v-model="query.createTime"
        type="daterange"
        placeholder="导入时间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="recycleTime"
    >
      <el-date-picker
        v-model="query.recycleTime"
        type="daterange"
        placeholder="回收时间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="alloCreateTime"
    >
      <el-date-picker
        v-model="query.alloCreateTime"
        type="daterange"
        placeholder="分配时间区间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="firstRegTime"
    >
      <el-date-picker
        v-model="query.firstRegTime"
        type="daterange"
        placeholder="首次成交时间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="projectTime"
    >
      <el-date-picker
        v-model="query.projectTime"
        type="daterange"
        placeholder="项目活动时间"
      >
      </el-date-picker>
    </div>

    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="followCreateTime"
    >
      <el-date-picker
        v-model="query.followCreateTime"
        type="daterange"
        placeholder="抢占时间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="visitTime"
    >
      <el-date-picker
        v-model="query.visitTime"
        type="daterange"
        placeholder="回访时间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="needTimes"
    >
      <el-date-picker
        v-model="timeArray"
        type="daterange"
        placeholder="选择时间"
      >
      </el-date-picker>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="bigCategory"
    >
      <el-input
        v-model="query.bigCategory"
        placeholder="来源大类"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="smallCategory"
    >
      <el-input
        v-model="query.smallCategory"
        placeholder="来源小类"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="projectName"
    >
      <el-input
        v-model="query.projectName"
        placeholder="项目名称"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="studentName"
    >
      <el-input
        v-model="query.studentName"
        placeholder="学生姓名"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="phoneNo"
    >
      <el-input
        v-model="query.phoneNo"
        placeholder="学生电话号码"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="importOperatorName"
    >
      <el-input
        v-model="query.importOperatorName"
        placeholder="导入人"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="followOperatorName"
    >
      <el-input
        v-model="query.followOperatorName"
        placeholder="抢占人"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="visitOperatorName"
    >
      <el-input
        v-model="query.visitOperatorName"
        placeholder="回访人"
      ></el-input>
    </div>
    <div
      class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group"
      v-if="counselorName"
    >
      <el-input
        v-model="query.counselorName"
        placeholder="咨询师"
      ></el-input>
    </div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-3 am-form-group am-u-end">
      <button
        @click="handleSearch"
        type="button"
        class="btn-search am-btn am-btn-default am-btn-success"
      >
        <span class="am-icon-search"></span>查询
      </button>
      <button
        v-if="hasExport"
        @click="handleExport"
        type="button"
        class="btn-search am-btn am-btn-default am-btn-success"
      >
        导出
      </button>
    </div>
  </div>
</template>

<script>
import io from "../../lib/io";
import moment from "moment";
import util from "../../lib/util";

export default {
  data: function() {
    return {
      priorities: [
        { label: "请选择紧急程度", value: "" },
        { label: "低", value: 0 },
        { label: "中", value: 1 },
        { label: "高", value: 2 }
      ],
      visitStatuses: [
        { label: "请选择跟进情况", value: "" },
        { label: "否", value: 0 },
        { label: "是", value: 1 }
      ],
      alloStatuses: [
        { label: "请选择分配情况", value: "" },
        { label: "未分配", value: 0 },
        { label: "已分配", value: 1 }
      ],
      followStatuses: [
        { label: "请选择抢占情况", value: "" },
        { label: "未抢占", value: 0 },
        { label: "已抢占", value: 1 }
      ],
      resourceTypes: [
        { label: "请选择资源类别", value: "" },
        { label: "旧资源", value: 0 },
        { label: "新资源", value: 1 }
      ],
      haveRegStatus: [
        { label: "请选择成交情况", value: "" },
        { label: "否", value: 0 },
        { label: "是", value: 1 }
      ],
      query: {
        areaTeamId: "",
        areaTeamName: "",
        busTeamId: "",
        startDate: "",
        endDate: "",
        alloStatus: "",
        followStatus: "",
        visitStatus: "",
        priority: "",
        studentName: "",
        smallCategory: "",
        projectName: "",
        bigCategory: "",
        phoneNo: "",
        importOperatorName: "",
        followOperatorName: "",
        visitOperatorName: "",
        alloCreateTime: [],
        firstRegTime: [],
        projectTime: [],
        createTime: [],
        followCreateTime: [],
        visitTime: [],
        customerResourceType: "",
        departmentId: "",
        gradeId: "",
        subjectId: "",
        subjectName: "",
        counselorName: "",
        recycleTime: [],
        haveReg: "",
        periodId: "",
        campusId: ""
      },
      departmentList: [],
      periods: [],
      timeArray: [new Date(), new Date()]
    };
  },
  props: {
    visitOperatorName: {
      type: Boolean,
      default: false
    },
    projectName: {
      type: Boolean,
      default: false
    },
    smallCategory: {
      type: Boolean,
      default: false
    },
    bigCategory: {
      type: Boolean,
      default: false
    },
    time: {
      type: Boolean,
      default: false
    },
    areaTeam: {
      type: Boolean,
      default: false
    },
    busTeam: {
      type: Boolean,
      default: false
    },
    needInitSearch: {
      type: Boolean,
      default: true
    },
    hasExport: {
      type: Boolean,
      default: false
    },
    priority: {
      type: Boolean,
      default: false
    },
    visitStatus: {
      type: Boolean,
      default: false
    },
    alloStatus: {
      type: Boolean,
      default: false
    },
    followStatus: {
      type: Boolean,
      default: false
    },
    studentName: {
      type: Boolean,
      default: false
    },
    phoneNo: {
      type: Boolean,
      default: false
    },
    importOperatorName: {
      type: Boolean,
      default: false
    },
    followOperatorName: {
      type: Boolean,
      default: false
    },
    createTime: {
      type: Boolean,
      default: false
    },
    alloCreateTime: {
      type: Boolean,
      default: false
    },
    projectTime: {
      type: Boolean,
      default: false
    },
    followCreateTime: {
      type: Boolean,
      default: false
    },
    visitTime: {
      type: Boolean,
      default: false
    },
    resourceType: {
      type: Boolean,
      default: false
    },
    department: {
      type: Boolean,
      default: false
    },
    gradeName: {
      type: Boolean,
      default: false
    },
    subject: {
      type: Boolean,
      default: false
    },
    firstRegTime: {
      type: Boolean,
      default: false
    },
    counselorName: {
      type: Boolean,
      default: false
    },
    recycleTime: {
      // 回收时间
      type: Boolean,
      default: false
    },
    haveReg: {
      // 是否成交
      type: Boolean,
      default: false
    },
    needPeriods: {
      // 期数
      type: Boolean,
      default: false
    },
    campusTeam: {
      // 期数
      type: Boolean,
      default: false
    },
    needTimes: {
      // 时间通用,为传入时间的字段
      type: Array,
      default: null
    }
  },
  watch: {
    "query.areaTeamId"(newVal) {
      this.areaTeams.map(val => {
        if (val.areaTeamId === newVal) {
          this.query.areaTeamName = val.name;
        }
      });
      this.query.periodId = "";
      this.findDepartmentList();
      this.loadPeriodData();
    }
  },
  computed: {
    areaTeams: function() {
      return this.$root.config.areaTeams || [];
    },

    campusTeams: function() {
      this.$root.config.campusList = this.$root.config.campusList || [];
      return this.query.areaTeamId
        ? (this.$root.config.campusList.length > 0 &&
            this.$root.config.campusList.filter(
              val => val.areaTeamId === this.query.areaTeamId
            )) ||
            []
        : [];
    },
    // 校区列表，由于系统有些地方搞混校区与业务组，busTeams 请看具体return， campusList为校区
    busTeams() {
      var options = (this.query.areaTeamId
        ? this.$root.config.groupBusTeams[this.query.areaTeamId] || []
        : []
      ).map(function(item) {
        return { value: item.busTeamId, text: item.name };
      });
      this.query.busTeamId = "";
      return options;
    },
    grades() {
      return this.$root.config.grades.map(function(item) {
        return { value: item.gradeId, label: item.gradeName };
      });
    },
    subjects() {
      return [{ value: "", label: "全部科目" }].concat(
        this.$root.config.subjects.map(function(item) {
          return { value: item.subjectId, label: item.subjectName };
        })
      );
    }
  },
  mounted() {
    if (window.config.areaTeams) {
      this.query.areaTeamId = window.config.areaTeams[0].areaTeamId;
      this.query.areaTeamName = window.config.areaTeams[0].name;
    }
    if (this.needInitSearch) {
      // 把url传来参数显示到表单，并且查询
      this.query = util.searchHashParam(this.query);
      this.query.followStatus =
        this.query.followStatus === ""
          ? this.query.followStatus
          : Number(this.query.followStatus);

      this.handleSearch();
    }
  },
  methods: {
    loadPeriodData: function() {
      var _this = this;
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        function(ret) {
          if (ret.success) {
            _this.periods = ret.data.map(function(item) {
              return { value: item.periodId, text: item.periodName };
            });
            // _this.query.periodId = ret.data.filter(
            //   item => item.isCurrent == 1
            // )[0].periodId;
            _this.$emit("period.loaded");
          } else {
            _this.$alert(ret.desc);
          }
        }
      );
    },
    handleAreaTeamIdChange() {
      this.query.busTeamId = "";
    },
    handleSearch() {
      this.timeArray = this.timeArray || [];
      if (this.needTimes && this.timeArray.length > 0) {
        this.needTimes.forEach((item, index) => {
          if (this.timeArray[index]) {
            this.query[item] = moment(this.timeArray[index]).format(
              "YYYY-MM-DD"
            );
          } else {
            this.query[item] = null;
          }
        });
      } else {
        if (this.needTimes) {
          this.needTimes.forEach((item, index) => {
            this.query[item] = null;
          });
        }
      }
      this.$emit("search", this.query);
    },
    handleExport() {
      this.timeArray = this.timeArray || [];
      if (this.needTimes && this.timeArray.length > 0) {
        this.needTimes.forEach((item, index) => {
          if (this.timeArray[index]) {
            this.query[item] = moment(this.timeArray[index]).format(
              "YYYY-MM-DD"
            );
          } else {
            this.query[item] = null;
          }
        });
      } else {
        if (this.needTimes) {
          this.needTimes.forEach((item, index) => {
            this.query[item] = null;
          });
        }
      }
      this.$emit("export", this.query);
    },
    findDepartmentList() {
      let param = {
        areaTeamId: this.query.areaTeamId
      };
      io.post(io.findDepartmentList, param, data => {
        if (data.success) {
          this.departmentList = data.data;
        } else {
          this.$alert(ret.desc);
        }
      });
    }
  }
};
</script>

<style lang="less">
.am-form input[type="text"][readonly] {
  cursor: text;
  background-color: transparent;
}
</style>
